<template>
    <div class="cd-wrapper" >
        <div class="table">
            <el-row class="header_row">
                <el-col :span="24">店铺基本信息:</el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1">合同编号：</el-col>
                <el-col :span="8" class="col_2"><el-input v-model="shopDetail.outTradeNo" size="small"></el-input></el-col>
                <el-col :span="4" class="col_3">到款信息：</el-col>
                <el-col :span="8" class="col_4">
                    <el-select v-model="shopDetail.payment" size="small">
                        <el-option label="未付款" value="0"></el-option>
                        <el-option label="已付款" value="1"></el-option>
                    </el-select>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1">服务日期：</el-col>
                <el-col :span="8" class="col_2" style="position: relative;">
                    <div class="date-cover"></div>
                    <el-date-picker
                        size="small"
                        style="width: 100%;"
                        v-model="gmtCreateInterval"
                        type="daterange"
                        :picker-options="pickerOptions1"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-col>
                <el-col :span="4" class="col_3">店铺ID：</el-col>
                <el-col :span="8" class="col_4">
                    <a target="_blank" :href="'https://trade.onloon.net/?shopId='+shopDetail.shopId">
                        <span>{{shopDetail.shopId}}</span>
                    </a>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1">增加有效期：</el-col>
                <el-col :span="8" class="col_2">
                    <el-input placeholder="请输入增加天数" v-model="addtime" type="number">
                        <template slot="prepend">+</template>
                        <template slot="append">天</template>
                    </el-input>
                </el-col>
                <el-col :span="4" class="col_3">服务状态：</el-col>
                <el-col :span="8" class="col_4">
                    <el-select v-model="shopDetail.contractProperty" size="small">
                        <el-option label="试用" value="PROBATION"></el-option>
                        <el-option label="正式" value="OFFICIAL"></el-option>
                    </el-select>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1">销售姓名：</el-col>
                <el-col :span="8" class="col_2"><el-input v-model="shopDetail.saleName" size="small"></el-input></el-col>
                <el-col :span="4" class="col_3">销售手机号：</el-col>
                <el-col :span="8" class="col_4"><el-input v-model="shopDetail.saleMobile" size="small"></el-input></el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1 " style="height:100px;">合同备注：</el-col>
                <el-col :span="20" class="col_2 " style="height:100px;"><el-input :autosize="{ minRows: 4, maxRows: 4}" type='textarea' v-model="shopDetail.content" size="small"></el-input></el-col>
            </el-row>
            <el-row>
                <el-col :span="24" class="col_1 " style="text-align:center">
                    <el-button size="small" type="primary" @click="saveOutTrade()" icon="el-icon-search">保存</el-button>
                </el-col>
            </el-row>
        </div>

        <div>
        <!--<el-form label-position="top" :inline="true" v-model="filter" class="demo-form-inline">-->
            <!--<el-row>-->
                <!--<el-col :span="24" class="log-header">-->
                    <!--<span class="op-log">操作记录：</span>-->
                    <!--<el-form-item width="100">-->
                        <!--<el-date-picker-->
                                <!--size="small"-->
                                <!--style="width: 100%;"-->
                                <!--v-model="gmtCreateInterval"-->
                                <!--type="datetimerange"-->
                                <!--:picker-options="pickerOptions1"-->
                                <!--placeholder="申请时间">-->
                        <!--</el-date-picker>-->
                    <!--</el-form-item>-->
                    <!--<el-form-item >-->
                        <!--<el-input placeholder="关键词" v-model="filter.phoneNumber" size="small"></el-input>-->
                    <!--</el-form-item>-->
                    <!--<el-form-item >-->
                        <!--<el-button size="small" type="primary" @click="submitSearch()" icon="el-icon-search">查询</el-button>-->
                    <!--</el-form-item>-->
                <!--</el-col>-->
            <!--</el-row>-->
            <!--<el-row class="margin-table">-->
                <!--<el-table :data="tableList" v-model="tableList" border style="width: 100%;">-->
                    <!--<el-table-column prop="shopName"  label="时间" width="150" align='center'></el-table-column>-->
                    <!--<el-table-column prop="phoneNumber"  label="说明" align='center'></el-table-column>-->
                <!--</el-table>-->
            <!--</el-row>-->
            <!--<el-row class="paging" style='margin-top: 40px;'>-->
                <!--<el-pagination-->
                        <!--@current-change="handleCurrentChange"-->
                        <!--@size-change="handleSizeChange"-->
                        <!--:current-page="currentPage"-->
                        <!--:page-sizes="[10, 20, 50]"-->
                        <!--:page-size="pageSize"-->
                        <!--layout="total, sizes, prev, pager, next, jumper"-->
                        <!--:total="totalCount">-->
                <!--</el-pagination>-->
            <!--</el-row>-->
        <!--</el-form>-->
        </div>

    </div>
</template>

<script>
    import Vue from 'vue'
    import {Row, Col, Form, FormItem, Button ,Select,Option,DatePicker,Table,Pagination,TableColumn,Input,Tabs,TabPane,Message,MessageBox,Dialog,Popover,Autocomplete} from 'element-ui'
    import {mapGetters, mapActions, mapMutations} from 'vuex';
    import * as types from '../store/mutation-types/customer/index';
    import { BTOCSHOP_TOTALCOUNT, BTOCSHOP_CURRENTPAGE, BTOCSHOP_PAGESIZE } from '../store/mutation-types/btoc-shop/index.js';
    import {formatDate} from '../assets/js/common.js';
    import {getDate, getCookie} from '../utils/auth.js';
    import Cookie from 'js-cookie';
    import axios from '~plugins/axios';

    Vue.use(Row);
    Vue.use(Col);
    Vue.use(Form);
    Vue.use(FormItem);
    Vue.use(Button);
    Vue.use(Select);
    Vue.use(Input);
    Vue.use(Option);
    Vue.use(DatePicker);
    Vue.use(Table);
    Vue.use(Tabs);
    Vue.use(TabPane);
    Vue.use(TableColumn);
    Vue.use(Pagination);
    Vue.use(Dialog);
    Vue.use(Popover);
    Vue.use(Autocomplete);

    Vue.prototype.$message = Message;
    Vue.prototype.$confirm = MessageBox.confirm;

    export default {
        props: {
            'data': {
                default: {}
            }
        },
        data () {
            return {
                detail: 'detail',
                shopDetail: {
                    outTradeNo:'',
                    payment:'',
                    startTime: null,
                    endTime: null,
                    time:'',
                    contractProperty:'',
                    saleName:'',
                    saleMobile:'',
                    content:'',
                    shopId:'',
                    timeType:'DAY'
                },
                addtime:null,
                startTime:0,
                endTime:0,
                gmtCreateInterval:[],
                pickerOptions1: {
                    // disabledDate(time) {
                    //     return time.getTime() > Data.now();
                    // }
                },
                tableList:[],
                filter:{
                    shopName:'',//品牌名称
                    phoneNumber:'',//cookie
                    checkStatus:'',//最近一次抓取结果
                    applyTimeBegin: '', //添加时间开始
                    applyTimeEnd: '',  //添加时间结束
                    pageSize: 50, // 每页条数
                    pageNum: 1
                },
            }
        },
        filters: {
            formatUpdateTime(time) {
                if(!time) return '';
                let date = new Date(time);
                return getDate(date,false)
            },
            timeTypeForm(val){
                if(val == 'DAY'){
                    return '天'
                }else if(val == 'YEAR'){
                    return '年'
                }else{
                    return val
                }
            }
        },
        watch:{
            'contactState'(){
                this.$store.commit('FOLLOW_CONTENT_CACHE',{data:this.followForm})
            },
            'addtime'(){
                if(!this.addtime || this.addtime==0){
                    this.gmtCreateInterval = [new Date(this.startTime), new Date(this.endTime)];
                    return;
                }
                if(this.addtime.length==1){
                    this.addtime = this.addtime.replace(/[^1-9]/g,'')
                }else{
                    this.addtime = this.addtime.replace(/\D/g,'')
                }
                if(this.endTime < Date.now()){
                    this.gmtCreateInterval = [new Date(Date.now()), new Date(parseInt(Date.now()) + this.addtime*24*60*60*1000)];
                }else{
                    this.$set(this.gmtCreateInterval, 1, new Date(parseInt(this.endTime) + this.addtime*24*60*60*1000))
                }
            }
        },
        methods: {
            /*goBack () {
             window.history.go(-1);
             },*/
            getShopDetail(step) {       //客户基本信息
                this.$store.dispatch('getShopDetail', {shopId: this.data.id})
                    .then((response) => {
                        let result = response.data;
                        console.log(response)
                        if (result.code === 0) {
                            if(result.data){
                                this.shopDetail = {
                                    outTradeNo: result.data.outTradeNo||'',
                                    payment: result.data.payment?'1':'0',
                                    startTime: result.data.startTime,
                                    endTime: result.data.endTime,
                                    time: result.data.time||'',
                                    contractProperty: result.data.contractProperty||'',
                                    saleName: result.data.saleName||'',
                                    saleMobile: result.data.saleMobile||'',
                                    content: result.data.content||'',
                                    shopId: result.data.shopId||'',
                                    timeType: result.data.timeType || 'DAY',
                                }
                                this.gmtCreateInterval = [new Date(result.data.startTime),new Date(result.data.endTime)]
                                this.startTime = result.data.startTime;
                                this.endTime = result.data.endTime;
                            }
                            //pageTab
                            if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
                                let name = this.data.name;
                                if(/^[\u4e00-\u9fa5]+$/.test(name.split('')[0])){
                                    name = name.length > 10? this.data.name.substr(0,10) + "..." : name;
                                }else{
                                    name = name.length > 30? this.data.name.substr(0,30) + "..." : name;
                                }
                                
                                let arr = this.pageTabsList;
                                arr[arr.length-1].name = name;
                                this.$store.commit('PAGETABSLIST',{data:arr})
                            }
                        }
                    })
                    .catch((error) => {
                        console.log(error)
                    });
            },
            saveOutTrade(){
                 if(this.gmtCreateInterval&&this.gmtCreateInterval[0]){
                    this.shopDetail.startTime = this.gmtCreateInterval[0]?getDate(this.gmtCreateInterval[0],true):'';
                    this.shopDetail.endTime =  this.gmtCreateInterval[1]?getDate(this.gmtCreateInterval[1],true):'';
                }else{
                    this.shopDetail.startTime = ''
                    this.shopDetail.endTimed = ''
                }

                if(!this.shopDetail.outTradeNo){
                    this.$message({type: 'info',message: '请输入合同编号'});
                    return;
                }else if(!this.shopDetail.saleName){
                    this.$message({type: 'info',message: '请输入销售姓名'});
                    return;
                }else if(!this.shopDetail.saleMobile){
                    this.$message({type: 'info',message: '请输入销售手机号'});
                    return;
                }else if(!this.addtime){
                    this.$message({type: 'info',message: '请输入有效期'});
                    return;
                }else if(!this.shopDetail.contractProperty){
                    this.$message({type: 'info',message: '请输入服务状态'});
                    return;
                }

                let params = {
                    shopId: this.shopDetail.shopId,
                    outTradeNo: this.shopDetail.outTradeNo,
                    payment: this.shopDetail.payment,
                    startTime: this.shopDetail.startTime?this.shopDetail.startTime:null,
                    endTime: this.shopDetail.endTime?this.shopDetail.endTime:null,
                    saleName: this.shopDetail.saleName,
                    saleMobile: this.shopDetail.saleMobile,
                    content: this.shopDetail.content,
                    time: this.addtime,
                    contractProperty: this.shopDetail.contractProperty,
                    timeType: "DAY"
                }

                this.$store.dispatch('udapteShopOutTrade', params)
                    .then((res)=>{
                        console.log(res)
                        let result = res.data;
                        if(result.code == 0){
                            this.$message({type: 'success',message: '提交成功'});
                        }
                    })

            },

            formatDate: formatDate,
            handleCurrentChange(val) {
                this.$store.commit('BTOCSHOP_CURRENTPAGE',{currentPage:val});
                this.getSearchCookieList()
            },
            handleSizeChange(val) {
                this.$store.commit('BTOCSHOP_PAGESIZE',{pageSize:val})
                this.getSearchCookieList();
            },
        },
        computed: {
            ...mapGetters({
                'customerLevels': 'getSalesCategoryList',
                'userData' : 'getUserData',
                'pageTabsList': 'getPageTabsList',
                'currentPage': 'currentPageShop',
                'totalCount': 'totalCountShop',
                'pageSize': 'pageSizeShop'
            }),
            signFlag () {
                return this.shopDetail.signFlag === 1 ? '1' : '0';
            }
        },
        created () {
            this.getShopDetail();
        },

        mounted() {

        }
    }
</script>

<style lang="scss">
    .date-cover{
        position: absolute;
        width: 100%;
        height: 100%;
        float: left;
        z-index: 100;
    }
    .action_row {
        .el-button {
            float: right;
            .el-button--danger {
                margin-left: 10px;
            }
        }
    }
    .log-header{
        border: 1px solid #dfe6ec;
        padding: 10px 10px 0 10px;
        border-bottom: none;
        background: #f1f2f2;
        .op-log{
            height: 36px;
            line-height: 36px;
            display: inline-block;
            font-weight: bold;
            color: #008dd8;
        }
    }
    .el-table th{
        background: #f1f2f2;
    }

    .table {
        margin-top: 10px;
        border: 1px solid #ccc;
        font-size: 14px;
        margin-bottom: 20px;

    .header_row {
        border-bottom: 1px solid #ccc;
        line-height: 40px;
        font-weight: bold;
        color: #008dd8;
        text-indent: 10px;
        background: #f1f2f2;
    }

    .col_2, .col_4 {
        text-align: left;
        text-indent: 3px;
        padding-right: 10px;
    }

    .col_1, .col_3 {
        text-align: right;
        background: #f1f2f2;
    }

    .col_1, .col_2, .col_3 {
        border-right: 1px dotted #ccc;
        border-bottom: 1px dotted #ccc;
    }
    .col_4 {
        border-bottom: 1px dotted #ccc;
    }

    .col_bottom {
        border-bottom: none
    }

    .el-col {
        height: 40px;
        line-height: 40px;
    .el-button-group {
        margin-left: 10px;
    }
    }
    .customer_web {
    &:hover {
         cursor: pointer;
         text-decoration: underline;
     }
    }
    .content_title, .content_text {
        height: 300px;
    }
    .table_action_row {
        text-align: center;
        background: #f1f2f2;
    }
    }
    .signRow {
        background-color: #00ee00;
    }
    .follow_list {
        margin-top: 20px;
        border: 1px solid #ccc;
        font-size: 14px;
        min-width: 1040px;
    .el-col {
        height: 40px;
        line-height: 40px;
        border-right: 1px dotted #ccc;
        border-bottom: 1px dotted #ccc;
        text-indent: 12px;
    &:last-child {
         border-right: none;
     }
    }
    .follow_content {
        height:auto;
        min-height: 40px;
        padding: 5px 10px;
        border-bottom: none;
        word-spacing:0px;
    div{
        line-height: 24px;
    }
    }
    .audio-pause,
    .audio-play{
        width: 25px;
        height: 25px;
        vertical-align: middle;
        cursor: pointer;
    }
    .time_sty{
        line-height: 16px;
        vertical-align: middle;
        width: 100px;
        text-indent: 0;
        display: inline-block;
        word-wrap:break-word
    }
    }
    .cd-get-allot{
        padding: 20px 0 0;
        text-align: center;
    }
</style>